<script setup>
	import {
		ref,
		watch
	} from "vue";
	import nuni from '../../static/utils/request.js'
	// 处理点击搜索事件
	// 搜索匹配推荐的防抖处理
	let timer1 = null
	const searchRecommendations = ref([])
	const test = ref([])
	const searchBarInp = ref("")
	watch(searchBarInp, () => {
		timer1 && clearTimeout(timer1)
		timer1 = setTimeout(() => {
			getSearchRecommendations()
		}, 560)
	})
	// ----请求搜索推荐
	const getSearchRecommendations = async () => {
		if (!searchBarInp.value.trim()) {
			searchRecommendations.value = []
			return
		}
		const {
			data: res
		} = await nuni.request({
			url: '/api/public/v1/goods/qsearch',
			data: {
				query: searchBarInp.value
			}
		})
		if (res.meta.status != 200) nuni.$showMsg()
		searchRecommendations.value = res.message
	}
	// 点击搜索推荐跳转
	const gotoGoodsDetail = o => {
		uni.navigateTo({
			url: '/subpkg/goods_detail/goods_detail?goods_id=' + o.goods_id
		})
		updateHistoryList()
	}
	// 搜索历史记录业务
	const historyList = ref([])
	const updateHistoryList = isClearAll => {
		if (isClearAll) historyList.value = []
		else {
			const pastIdx = historyList.value.indexOf(searchBarInp.value)
			if (pastIdx !== -1)
				historyList.value.splice(pastIdx, 1)
			historyList.value.unshift(searchBarInp.value)
		}
		// 持久化
		uni.setStorageSync("search-history", JSON.stringify(historyList.value))
	}
	// ----页面一加载就获取本地记录
	historyList.value = JSON.parse(uni.getStorageSync("search-history") || "[]")
	// ----点击历史跳转
	const gotoSearchListByHistory = (ele) => {
		searchBarInp.value = ele
		gotoSearchList()
	}
	const gotoSearchList = () => {
		updateHistoryList()
		uni.navigateTo({
			url: '/subpkg/goods_list/goods_list?query=' + searchBarInp.value
		})
		searchBarInp.value = ''
	}
</script>
<template>
	<!-- 搜索框及搜索按钮 -->
	<view class="search-box">
		<uni-search-bar placeholder="输入搜索关键词..." :radius="100" cancel-button="none" bgColor="#fff" :focus="true"
			v-model="searchBarInp" class="searchInp"></uni-search-bar>
		<button class="searchToGoodsList" @click="gotoSearchList">搜索</button>
	</view>
	<!-- 搜索建议 -->
	<view class="recom-list">
		<view class="recom-item" v-for="(e2, i2) in searchRecommendations" :key="i2" @click="gotoGoodsDetail(e2)">
			<view class="recom-item-name">
				{{e2.goods_name}}
			</view>
			<uni-icons type="right" size="16"></uni-icons>
		</view>
	</view>
	<!-- 搜索历史 -->
	<view class="search-history-box" v-show="!searchRecommendations.length">
		<view class="history-head">
			<text>搜索历史</text>
			<uni-icons type="trash" size="24" @click="updateHistoryList(true)"></uni-icons>
		</view>
		<view class="history-list">
			<view v-for="(ele, i) in historyList" :key="i" class="history-item" @click="gotoSearchListByHistory(ele)">
				{{ele}}
			</view>
		</view>
	</view>
</template>


<style lang="scss">
	.search-box {
		display: flex;
		align-items: center;
		background-color: #C00000;
		position: sticky;
		top: 0;
		z-index: 99;

		.searchInp {
			flex: 4
		}

		.searchToGoodsList {
			margin: 0;
			margin-right: 10px;
			padding: 0;
			flex: 1;
			height: 36px;
			line-height: 36px;
			font-size: 14px;
		}
	}

	.recom-list {
		padding: 0 5px;

		.recom-item {
			display: flex;
			justify-content: space-between;
			font-size: 13px;
			padding: 15px 0;
			border: 1px solid #efefef;
			background-color: #fff;

			.recom-item-name {
				// 超出内容用...代替的3行CSS
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}

	.search-history-box {
		.history-head {
			display: flex;
			justify-content: space-between;
			background-color: #fff;
			padding: 12px 22px;
			border-bottom: 1px solid #e2e2e2;
		}

		.history-list {
			margin-top: 5px;
			display: flex;
			flex-wrap: wrap;

			.history-item {
				margin: 5px;
				padding: 10px;
				min-width: 20px;
				font-size: 15px;
				height: 16px;
				line-height: 16px;
				text-align: center;
				background-color: #fff;
				border-radius: 10px;
				box-shadow: 1rpx 1rpx 10rpx 4rpx #eee;
			}
		}
	}
</style>